<template>
	<scroll-view class="scv">
		<swiper class="image-container" circular autoplay @change="swiperChange">
			<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index" lazy-load>
				<view class="item" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
					<image class="image" :src="item.image || errorImage" mode=""></image>
				</view>
				
			</swiper-item>
		</swiper>
		
		<view v-if="videoList.length == 0" style="height: 80vh; width:100vw;text-align: center;background-color: #fff;" @click="reLoad">
			<text style="text-align: center;line-height: 70vh;">{{noData}}</text>
		</view>
		<view class="welcome_cotent">
			<!-- 动态 滚动播放前4条通知 -->
			<view class="notice_view">
				<image style="height: 80rpx;width: 100rpx;float: left;" src="../../static/images/icon_cxdt_home.png" ></image>
				<swiper style="width: 550rpx; height: 80rpx; float:right" autoplay interval="2000" circular vertical @click="moreNotice()">
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<text class="notice_name">
							{{item.name}}
						</text>
					</swiper-item>
				</swiper>
			</view>
			<view class="menu_bar" >
				
				<view class="menu_list" v-for="(item, index) in menuList" :key="index" hover-stop-propagation="true"
						@click="index == 0 ? morePolicy()
								:index == 1 ?moreVideo()
								:index == 2 ?search_shenqing()
								:index == 3 ?goBigScreen()
								:''
							">
					<view hover-stop-propagation="true">
						<image class="menu_icon" :src= "item.icon"></image>
					</view>
					<view class="icon" hover-stop-propagation="true">
						<text>{{item.name}}</text>
					</view>
				</view>
				
			</view>
			<view class="source_bar" >	
				<view class="menu_list" v-for="(item, index) in menuListSource" :key="index" hover-stop-propagation="true"
						@click="index == 0 ? talentCenter()
								:index == 1 ?kjcgCenter()
								:index == 2 ?machineList()
								:index == 3 ?projectCenter()
								:index == 4 ?companyCenter()
								:index == 5 ?zoneCenter()
								:index == 6 ?achivementCenter()
								:''
							">
					<view hover-stop-propagation="true">
						<image class="menu_icon" :src= "item.icon"></image>
					</view>
					<view class="icon" hover-stop-propagation="true">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<!-- 政策 最新一条 -->
			<!-- <view class="policy_view"  >
				<view  v-if="liveList.length>0" @click="zhiboCenter()" style="padding-top: 15rpx;">
					<image style="height: 170rpx;width: 100%;" src="http://113.142.144.25:9301/statics/appimg/home_banner.png" ></image>
				</view>
				<view v-else @click="morePolicy()">
					<image style="height: 170rpx;width: 25%; float: left;" src="http://113.142.144.25:9301/statics/appimg/bg_policy_new.png" ></image>
					<text class="policy_new">
						{{policyList[0].title}}
					</text>
					<text class="publicTime" style="margin-right: 30rpx; margin-top: 5rpx; float:right;">【{{policyList[0].createTime}}】</text>
				</view>
			</view> -->
			<view class="video_list">
				<view style="width: 100%;">
					<image class="title_icon" src="http://113.142.144.25:9301/statics/appimg/notice_icon_new.png"> </image>
					<text class="title_lable">路演回看</text>
					<image style="height: 40rpx; width:40rpx; margin-right: 20rpx; margin-top: 18rpx; float: right; " 
					src="http://113.142.144.25:9301/statics/appimg/icon_more_new.png" @click="moreVideo()"> </image>
				</view>
				<view class="devideline"></view>
				<view class="video_item" v-for="(item,index) in videoList" :key="index" @click="videoDetail(videoList[index])">
					<image class="video_img" :src="item.coverImage"></image>
					<view class="video_content">
						<view >
							<text class="video_title">{{item.title}}</text>
						</view>
						<view>
							<text class="publicTime">活动时间：{{item.publishTime}}</text>
						</view>
					</view>
					<view class="devideline"></view>
				</view>
			</view>
		</view>	
	</scroll-view>
</template>

<script>
	import {
		useStore
	} from "vuex";
	import env from '../../utils/env';
	import *  as artical from "@/api/article";
	import *  as video from "@/api/video";
	import * as myLive from "@/api/zhibo.js"
	import { codeList } from "@/utils/code";
	import {
		defineComponent
	} from "vue";
	export default {
		data() {
			return {
				title: '',
				imgList:[
					{id:'0',image:'http://113.142.144.25:9301/statics/appimg/bannerApp1.jpg'},
					{id:'1',image:'http://113.142.144.25:9301/statics/appimg/bannerApp2.jpg'},
					{id:'2',image:'http://113.142.144.25:9301/statics/appimg/bannerApp3.jpg'},
				],
				menuList:[
					{name:'成果转化',icon:'http://113.142.144.25:9301/statics/appimg/icon_home_policy_new.png'},
					{name:'线上路演',icon:'http://113.142.144.25:9301/statics/appimg/icon_video_new.png'},
					{name:'揭榜挂帅',icon:'http://113.142.144.25:9301/statics/appimg/search_menu_new.png'},
					{name:'数据大屏',icon:'http://113.142.144.25:9301/statics/appimg/public_menu_new.png'},
				],
				menuListSource:[
					{name:'科技人才库',icon:'../../static/images/ic-qcy-member.png'},
					{name:'科技成果库',icon:'../../static/images/ic-qcy-achievement.png'},
					{name:'科研仪器库',icon:'../../static/images/ic-qcy-machine.png'},
					{name:'科技项目库',icon:'../../static/images/ic-qcy-zone.png'},
					{name:'科技企业库',icon:'../../static/images/ic-qcy-company.png'},
					{name:'科技园区库',icon:'../../static/images/ic-qcy-zone.png'},
					{name:'专利查询库',icon:'../../static/images/ic-qcy-patent.png'},
				],
				videoList:[
					{title:'',publishTime:''}
				],
				noticeList:[
					{title:''}
				],
				policyList:[
					{title:'',publishTime:''}
				],
				liveList:[
					{title:'',publishTime:''}
				],
				noData:'加载中。。。',
				currentIndex:0,
				zhiboList:[],
			}
		},
		onLoad() {
			uni.showLoading({
				title:"加载中"
			})
			this.getNoticeFour();
			// this.getVideo();
		},
		methods:{
			reLoad(){
				uni.showLoading({
					title:"加载中。。。"
				})
				this.getNoticeFour();
			},
			morePolicy(){
				uni.navigateTo({
					url:'/subpages/pages/cgzh/index'
				})
			},
			moreNotice(){
				uni.navigateTo({
					url:'/subpages/pages/notice/notice_list'
				})
			},
			moreVideo(){
				uni.navigateTo({
					url:'/subpages/pages/video/video_list'
				})
			},
			publish(){
				uni.navigateTo({
					url:'/subpages/pages/publish/publish'
				})
			},
			// exchange(){
			// 	uni.navigateTo({
			// 		url:'/pages/achievement/achievement_publish'
			// 	})
			// },
			search_shenqing(){
				uni.navigateTo({
					url:'/subpages/pages/jbgs/index'
				})
			},
			getNoticeFour(){
				// artical.getArticle(codeList.TZGG).then((res) => {
				// 	this.noticeList = res.rows;
				// });
				// artical.getArticleFive(codeList.KJZC).then((res) => {
				// 	this.policyList = res.rows;
				// });
				artical.getArticle({
					pageNum:1,
					pageSize:10,
				}).then((res)=>{
					this.noticeList = res.rows
				})
				video.getVideoFour().then((res) => {
					this.videoList = []
					res.rows.forEach(v => {
						v.coverImage = `${env.imgUrl}` + v.coverImage
						this.videoList.push(v)
					})
				});
				myLive.listLive().then((res)=>{
					this.liveList = res.rows
				});
				if(this.noticeList.length == 0){
					this.noData = '暂无数据，点击重试！'
				}
				uni.hideLoading({});
			},
			// getVideo(){
			// 	video.getVideoFour().then((res) => {
			// 		this.videoList = res.rows
			// 	});
			// },
			swiperChange(){
				
			},
			videoDetail(item){
				uni.navigateTo({
					url:'/subpages/pages/detail/video_detail?id='+ item.id
				})
			},
			zhiboCenter(){
				uni.navigateTo({
					url:'/subpages/pages/zhiboCenter/zhiboList'
				})
			},
			
			//科技资源
			talentCenter(){
				uni.navigateTo({
					url:'/subpages/pages/resource/member/techPersonList'
				})
			},
			kjcgCenter(){
				uni.navigateTo({
					url:'/subpages/pages/resource/kjcg/index'
				})
			},
			machineList(){
				uni.navigateTo({
					url:'/subpages/pages/resource/kyyq/index'
					// url:'/pages/machineCenter/machine_list?orderType='+'0'
				})
			},
			projectCenter(){
				// uni.navigateTo({
				// 	url:'/subpages/pages/resource/kyyq/index'
				// 	// url:'/pages/machineCenter/machine_list?orderType='+'0'
				// })
				uni.showToast({
					icon:'error',
					title:'此库暂未开放！'
				})
			},
			companyCenter(){
				uni.navigateTo({
					url:'/subpages/pages/resource/kjqy/index'
				})
			},
			zoneCenter(){
				uni.navigateTo({
					url:'/subpages/pages/resource/zone/zone'
				})
			},
			achivementCenter(){
				uni.navigateTo({
					url:'/subpages/pages/achivement/achivement_list'
				})
			},
			goBigScreen(){
				uni.navigateTo({
					url:'/pages/largeDataScreen/largeDataScreen'
				})
			}
		}
	}
</script>

<style lang="scss" type= "text/css">
	.scv {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background: #e6e6e6;
	}
	
	.title_icon {
		width: 35rpx;
		height: 35rpx;
		margin-left: 4%;
		margin-top: 20rpx;
	} 
	
	/* 轮播图 */
	.image-container {
		/* width: 750rpx; */
		margin: 20rpx 30rpx;
		height: 320rpx;
	}
			
	.item {
		position: relative;
	}
			
	.image {
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
	}
	
	.notice_view {
		margin: 20rpx 30rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	
	.policy_view {
		height: 190rpx;
		margin: 25rpx 30rpx;
		border-radius: 15rpx;
	}
	
	.menu_bar {
		height: 240rpx;
		width: 92%;
		background-color: #fff;
		margin: 25rpx 30rpx;
		border-radius: 15rpx;
	}
	
	.icon {
		margin: 0 auto;
		text-align: center;
	}
	
	.menu_icon {
		width: 90rpx;
		height: 90rpx;
		padding: 15rpx;
		margin-left: 3%;
		margin-top: 10rpx;
	}
	
	.menu_list {
		font-size: 25rpx;
		float: left;
		margin-left: 45rpx;
		margin-top: 25rpx;
	}
	
	.source_bar {
		height: 430rpx;
		width: 92%;
		background-color: #fff;
		margin: 25rpx 30rpx;
		border-radius: 15rpx;
	}
	
	.video_list {
		width: 92%;
		margin: 20rpx 30rpx;
		// height: 1700rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding-bottom: 40rpx;
	}
	
	.notice_list {
/* 		width: 88%; */
		margin: 20rpx 30rpx;
		height: 660rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	
	.policy_item {
		padding: 20rpx;
	}
	
	.policy_title {
		display: -webkit-box;
		width: 650rpx;
		font-size: 25rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical;  
		-webkit-line-clamp: 1; 
	}
	
	.publicTime {
		float:left;
		font-size: 23rpx;
		color: #a1a1a1;
		margin-top: 5rpx;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		 width:100%;
		 background-color: #eeeeee;
		 margin-top: 15rpx;
		 margin-bottom: 15rpx;
	}
	
	.jumpToPolicy {
		font-size: 26rpx;
		float: left;
		width: 90%;
		height: 70rpx;
		margin-top: 20rpx;
		background-color: #016fb8;
		margin-left: 5%;
	}
	
	.video_item {
		padding: 20rpx;
	}
	
	.video_img {
		height: 280rpx;
		width: 98%;
		border-radius: 10rpx;
	}
	
	.video_content {
		width: 100%;
		margin-left: 15rpx;
	}
	
	.video_title {
		display: -webkit-box;
		width: 90%;
		font-size: 30rpx;
		padding_top: 15rpx;
		margin-top: 15rpx;
		font-size: 25rpx;
		margin-right: 20rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	
	.policy_new{
		display: -webkit-box;
		width: 70%; 
		height: 100rpx;
		line-height: 40rpx; 
		float: right; 
		margin-top: 15rpx; 
		margin-right: 20rpx; 
		font-size:28rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical;  
		-webkit-line-clamp: 2; //显示几行
	}
	
	.notice_name{
		display: -webkit-box;
		width: 90%;
		margin-top: 20rpx;
		font-size: 28rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.big_screen{
		width: 92%;
		aspect-ratio: 384 / 216;
		background-image: url(/static/images/big_screen.png);
		background-size: cover;
		margin: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 14rpx;
	}
</style>
